<template>
  <div class="lifedetails">
    <Popup :popupVisible=true :back="back"   :source="this.$store.state.sharehot">
      <div name="a" class="xq-div" v-for="item of cellList" :key="item.id">
        <div class="div1">
          <div class="div1-img">
            <img class="user-img1" :src="item.img" alt="" />
          </div>
          <div class="div1-text">
            <p class="div1-text-p1">{{ item.title }}</p>
            <p class="div1-text-p2">{{ item.title1 }}</p>
            <span class="div1-text-sp">{{ item.text }}</span>
          </div>
        </div>
        <div class="div2">
          <div class="div2-img">
            <div class="mg-10">
              <img class="img2" :src="item.img1" alt="" />
            </div>
            <div class="mg-10">
              <img class="img2" :src="item.img2" alt="" />
            </div>
            <div class="mg-10">
              <img class="img2" :src="item.img3" alt="" />
            </div>
            <div class="mg-10">
              <img class="img2" :src="item.img4" alt="" />
            </div>
          </div>
        </div>
      </div>
         <Comment></Comment>
    </Popup>

   
  </div>
</template>
<script>
import Comment from "./Comment.vue";
import Popup from "./Popup.vue";
export default {
  mounted(){
    if(this.$route.params.parent){
      
    this.back = this.$route.params.parent
    }
  },
  components: {
    Popup,
    Comment,
  },
  data() {
    return {
      back: "community",
      cellList: [
        {
          title: "ZINGVR",
          title1: "上午 8：59",
          text:
            "喝点小酒, 远离这城市的喧嚣,独享属于自己的那一份静谧。",
          img: require(`../assets/img/user/user1.webp`),
          img1: require(`../assets/img/life/share1.1.webp`),
          img2: require(`../assets/img/life/share1.2.webp`),
          img3: require(`../assets/img/life/share1.3.webp`),
          img4: require(`../assets/img/life/share1.4.webp`),
        },
      ],
    };
  },
};
</script>
<style >
.lifedetails .xq-div .user-img1 {
      width: 40px;
    height: 40px;
    margin: 7px 0px;
    margin-left: -3px;
    border-radius: 50%;
}

.lifedetails .div1 {
  width: 100%;
  
  margin-top: 50px;
  display: flex;
}
.lifedetails .div1-img {
  width: 15%;
  text-align: center;
}
.lifedetails .div1-text {
  width: 80%;
}
.lifedetails .div1-text-p1 {
  margin-top: 6px;
  font-size: 17px;
}
.lifedetails .div1-text-p2 {
      display: block;
  
    margin-left: -2px;
  font-size: 10px;
  color: rgb(66, 64, 66);
}
.lifedetails .div1-text-sp {
  font-size: 18px;
  margin-top: 14px;
 margin-left: -6px;
  display: block;
  font-family:STHeiti;
 
}
.lifedetails .div2 {
  width: 100%;
  height: 170px;
  display: flex;
}

.lifedetails .div2-img {
  margin-top: 10px;
  margin-left: 50px;
  display: flow-root;
  margin-right: 7px;
}
.lifedetails .img2 {
  width: 100%;
  height: 74px;
  border-radius: 6%;
}
.lifedetails .mg-10 {
  width: 30%;
  display: inline-flex;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>